<template>
    <div class="app">
      <!-- <van-icon name="arrow-left" /> -->
      <p style="margin-left: 15px; ">
        我的关注({{ num }})</p>
      <div class="Chat-body">
        <div class="inform" v-for="(item,index) in list" :key="index">
          <span style="display: flex;">
            <div class="inform-i">
            <img src="../assets/01.webp" alt="" />
          </div>
          <div class="inform-message">
            <span class="me">{{ item.name }}</span>
          </div>
          </span>
          
          <div class="data">
            <button style="border-radius: 10px; height: 25px; padding: 0px 10px; font-size: 10px; border: 1px solid darkgrey; background: white;">已关注</button>
            <p style="font-size: 20px; " >...</p>
            <!-- <span>05/28</span>
            <van-badge :content="1" class="tips" /> -->
          </div>
        </div>
      </div>
    </div>
    <!-- </div> -->
  </template>
  
  <script>
  import { attenti } from "@/api/mint";
  export default {
    data() {
      return {
        name: 'aaa',
        num: 2,
        list: [],
        value:''
      }
    },
    methods: {
      a() {
        console.log(123);
        attenti({
          uid:1
        }).then(res => {
          console.log(res);
          this.list = res.result
          this.num = this.list.length
        })
      }
    },
    mounted() {
      this.a()
    }
  };
  </script>
  
  <style scoped>
  .app{
    padding: 0;
    /* margin-left: 30px; */
  }
  .inform-i > img {
    width: 100%;
    height: 100%;
  }
  .Chat-body {
    margin-top: 20px !important;
    width: 90%;
    height: 100px;
    margin: 0 auto;
  }
  .inform {
    height: 50px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .inform-i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgb(189, 224, 231);
    border-radius: 50px;
    overflow: hidden;
  }
  
  .inform-message {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 50px;
    font-size: 13px;
  }
  .me {
    font-size: 18px;
    margin-left: 10px;
  
  }
  .tips {
    line-height: 22px;
    width: 22px;
    text-align: center;
    border-radius: 20px;
  }
  .data {
    display: flex;
    /* flex-direction: column;
    justify-content: space-between; */
    align-items: center;
    /* font-size: 14px; */
    /* line-height: 50px; */
  }
  .data p{
    font-size: 12px;
    color: rgb(168, 172, 172);
    display: inline-block;
    line-height: 30px;
    margin: 0;
    height: 40px;
    margin-left: 10px;
  }
  </style>